<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>疯狂聊天室</title>
    <script th:src="@{js/sockjs.min.js}"></script>
    <script th:src="@{js/stomp.min.js}"></script>
    <script th:src="@{js/jquery-3.3.1.min.js}"></script>
</head>
<body>
    <h1>疯狂哇咔咔聊天室</h1>
    <form id="crazyForm">
        <textarea rows="4" cols="60" name="text"></textarea>
        <input type="submit" value="发送"/>
    </form>
    <div id="outPut"></div>
    <button id="stop">关闭连接</button>
    <script th:inline="javascript">
        $('#crazyForm').submit(function (e) {
            e.preventDefault();
            var text=$('#crazyForm').find('textarea[name="text"]').val();
            sendSpittle(text);
        });
        var sock=new SockJS("/endpointChat");
        var stomp=Stomp.over(sock);
        stomp.connect('user','user',function (frame) {
            stomp.subscribe("/user/queue/notifications",handleNotification)
        });
        function handleNotification(message) {
            $('#outPut').append("<b>Received:"+message.body+"</b><br>")
        }
        function sendSpittle(text) {
            stomp.send("/chat",{},text);
        }
        $('#stop').click(function () {
            sock.close();
        })
    </script>
</body>
</html>